<template>
  <div id="chart_weight">

  </div>
</template>

<script>
  import *as echarts from 'echarts'

  export default {
    name: 'WeightAnalysis',
    data() {
      return {
        option: {
          title: {
            text: '各年龄段平均体重',
            textStyle: {
              fontSize: 20,
              color: ['#6d6d6d'],
              fontWeight: 'normal'
            },
          },
          color: ['#2588ff'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '体重（公斤）',
              type: 'bar',
              barWidth: '60%',
              data: []
            }
          ]
        }
      }
    },
    created() {
      this.getTestList();
    },
    mounted() {
      this.initEcharts();
    },
    methods: {
      initEcharts() {
        let myChart = echarts.init(document.getElementById('chart_weight'));
        myChart.setOption(this.option, true);

      },
      getTestList() {
        this.axios.get('micro-sports-server/weight/allAvgWeight', {
          params: {}
        }).then(res => {
          let arr = res.data.data;
          let arr1 = new Array(arr.length);
          let arr2 = new Array(arr.length);
          arr.forEach(function (value, index) {
            arr1[index] = value.ageType;
            arr2[index] = value.avgWeight;
          });
          this.option.series[0]["data"] = arr2;
          this.option.xAxis[0]["data"] = arr1;
          console.log(this.option)
        })
      },
    },
    watch: {
      option: {
        handler(newValue, oldValue) {
          this.initEcharts();
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

  #chart_weight {
    width: 50%;
    height: 500px;
    border: 1px solid blanchedalmond;
    margin-left: 20px;
  }

</style>
